<template>
  <div class="body" id="wekupButton">
    <div class="header"></div>

    <!-- title -->
    <img src="../../assets/img/twenty/t2@2x.png" class="images" alt />
    <!-- title2 -->
    <img src="../../assets/img/twenty/t3@2x.png" class="images" alt />
    <!-- 微信遮罩 -->
    <div @touchmove.prevent class="rigth" v-if="show">
      <img src="../../assets/img/wei_20210307160153.png" alt />
    </div>
    <!-- 置顶 -->
    <div class="totop" id="totop" @click="backTop" v-show="btnFlag">
      <!-- <i class="iconfont icon-zhiding"></i> -->
    </div>
  </div>
</template>
  
  <script>
import bridge from "../../js/js1";
import { index, Coupondev } from "@/api/index";
import { share } from "../../js/wechat";
import { getSystem, openApp, getUrlQuery, parseKeyValue } from "../../js/js";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      list: [],
      lister: [],
      listdev: [],
      show: false,
      system: getSystem(),
      atr: [],
      atrdev: [],
      listerdev: [],
      share: true,
      scrollTop: 0,
      btnFlag: false,
      showTips: false
    };
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},

  mounted() {
    this.toph();
    window.addEventListener("scroll", this.scrollToTop);
    // share({
    //   title: '雷允上品牌专场',
    //   desc: '活动时间：9月16日-9月23日，雷允上品牌大促，黑芝麻丸仅售17.5元',
    //   imgUrl: 'https://download.yuanfuda933.com/h5/images/thunder.png',
    //   shareUrl: 'https://download.yuanfuda933.com/h5/other2.html#/thunder',
    // })
  },
  // 组件方法
  methods: {
    //   toph () {
    //   if (this.system.wechat) {
    //     this.show = true
    //     return false
    //   } else {
    //     this.show = false
    //   }
    // },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      // console.log(that.scrollTop);
      if (that.scrollTop > 800) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },

    // 跳转下载
    nav(item) {
      if (this.system.wechat) {
        this.show = true;
        return false;
      } else {
        this.show = false;
      }
      if (!this.system.iOS9 && !this.system.android) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return false;
      }
      // console.log(item);
      // if (this.system.android) {
      //   openApp({
      //     query: { spuId: item.goods_id }
      //   })
      // }
      // if (this.system.iOS) this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')
    },
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout(t => {
        document.body.removeChild(a);
      }, 0);
    }
  }
};
</script>
  
  <style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  // height: 93.12rem;
  margin: 0 auto;
  line-height: 1.5;
  background: #462b10;
  font-family: Arial, Helvetica;
  .moy {
    width: 3.653333rem;
    height: 0.933333rem;
    margin: 0.266667rem auto;
    border-radius: 0.2rem;
    font-weight: 600;
    font-size: 0.473333rem;
    color: #71421c;
    text-align: center;
    line-height: 0.933333rem;
    background: #eac286;
  }
  .totop {
    position: fixed;
    width: 1.2rem; /* 40/16 */
    height: 1.2rem;
    border-radius: 1.25rem /* 20/16 */;
    opacity: 0.8;
    background: url("../../assets/ding.png") no-repeat;
    background-size: contain;
    box-shadow: 0 1px 5px 0 #e0e0e0;
    right: 0.125rem; /* 18/16 */
    bottom: 3rem; /* 64/16 */
    z-index: 1100;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .images {
    height: 20px;
  }
}
</style>
  